{% extends '_base_create_update.html' %}

{% block top_css %}
    {{ super() }}

    <!--Treeview-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='plugins/bootstrap-treeview/css/bootstrap-treeview.min.css') }}">
    <!--bees-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bees.css') }}">
{% endblock %}


<!-- Content head -->
{% block head_title %}
    代码发布
{% endblock %}

{% block head_nav %}
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">代码发布</a></li>
        <li class="active">项目管理</li>
    </ol>
{% endblock %}

<!-- Content body -->
{% block body_title %}
    新增项目信息
{% endblock %}

{% block body_form %}
    <form name="projectForm" action="" class="form-horizontal">
        <div class="panel-body">
            <p class="bord-btm pad-ver text-main text-bold">基本信息</p>
            <div class="row">
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>项目名称</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="name" placeholder="请输入项目名称" data-rule="项目名称: required;" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>项目环境</label>
                            <div class="col-lg-8">
                                <select class="select2 form-control" name="environment_id" data-placeholder="请选择项目环境" data-rule="项目环境: required;">
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>上线方式</label>
                            <div class="col-lg-8">
                                <select class="select2 form-control" name="repo_mode" data-placeholder="请选择上线方式" data-rule="上线方式: required;">
                                    <option value="tag" selected>Tag</option>
                                    <option value="branch">Branch</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">上线目录</label>
                            <div class="col-lg-8">
                                <input class="form-control" name="sparse_dir" placeholder="请选输入上线目录" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">项目分组</label>
                            <div class="col-lg-8">
                                <select class="select2 form-control" name="label_id" data-placeholder="请选择项目分组">
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">是否审核</label>
                            <div class="col-lg-8">
                                <div class="checkbox">
                                    <input id="radio-audit-show" class="magic-radio" type="radio" name="task_audit" value="1"  checked>
                                    <label for="radio-audit-show">审核</label>

                                    <input id="radio-audit-none" class="magic-radio" type="radio" name="task_audit" value="0">
                                    <label for="radio-audit-none">不审核</label>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">项目状态</label>
                            <div class="col-lg-8">
                                <div class="checkbox">
                                    <input id="radio-status-show" class="magic-radio" type="radio" name="status" value="1" checked>
                                    <label for="radio-status-show">启用</label>

                                    <input id="radio-status-none" class="magic-radio" type="radio" name="status" value="0">
                                    <label for="radio-status-none">禁用</label>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">项目描述</label>
                            <div class="col-lg-8">
                                <textarea class="form-control" rows="3" name="describe"></textarea>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>

            <p class="bord-btm pad-ver text-main text-bold">仓库信息</p>
            <div class="row">
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>仓库类型</label>
                            <div class="col-lg-8">
                                <select class="select2 form-control" name="repo_type" data-placeholder="请选择仓库类型" data-rule="仓库类型: required;">
                                    <option value="svn" selected>Svn</option>
                                    <option value="git">Git</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>仓库地址</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="repo_url" placeholder="请输入仓库地址" data-rule="仓库地址: required;" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger"> </span>仓库用户</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="repo_username" placeholder="请输入仓库用户" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger"> </span>仓库密码</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="repo_password" placeholder="请输入仓库密码" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>


            <p class="bord-btm pad-ver text-main text-bold">目标主机</p>
            <div class="row">
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>发布根目录</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="target_root" placeholder="请输入发布根目录" data-rule="发布根目录: required;" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>发布版本库</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="target_releases" placeholder="请输入发布版本库" data-rule="发布版本库: required;" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>版本保留数</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="keep_version_num" placeholder="请输入版本保留数" data-rule="版本保留数: required;" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>发布服务器</label>
                            <div class="col-lg-8">
                                <select class="select2 form-control" name="server_ids" data-placeholder="请选择发布服务器" data-rule="发布服务器: required;">
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">项目的权限</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="privilege_user" value="root" placeholder="项目的权限"  autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">过滤的文件</label>
                            <div class="col-lg-8">
                                <textarea class="form-control" rows="10" name="filter_files" placeholder="请填写过滤的文件"></textarea>
                                <span class="fa fa-info-circle mar-top-7"> 文件一行一条，过滤的文件将不会被上传到上线，如果需要将该文件上传到线上，并且内容不想与目前仓库中的内容相同时（例如配置文件），请在文件过滤中配置过滤的内容。</span>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>

            <p class="bord-btm pad-ver text-main text-bold">高级任务</p>
            <div class="row">
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">部署前</label>
                            <div class="col-lg-8">
                                <div class="fs-box">
                                    <div class="label label-default">
                                        <i class="fs-max fa fa-expand"></i>
                                        <i class="fs-min fa fa-compress hidden"></i>
                                    </div>
                                    <div id="prevDeploy" class="form-control" style="height: 260px; width: 100%"></div>
                                    <span class="fa fa-info-circle mar-top-7"> 当前命令执行路径是项目当前的目录，在部署代码之前的准备工作，如git的一些前置检查、vendor的安装（更新），一行一条</span>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">部署后</label>
                            <div class="col-lg-8">
                                <div class="fs-box">
                                    <div class="label label-default">
                                        <i class="fs-max fa fa-expand"></i>
                                        <i class="fs-min fa fa-compress hidden"></i>
                                    </div>
                                    <div id="postDeploy" class="form-control" style="height: 260px; width: 100%"></div>
                                    <span class="fa fa-info-circle mar-top-7"> 当前命令执行路径是项目当前版本的目录，git代码检出之后，可能做一些调整处理，如vendor拷贝，环境适配（mv config-test.php config.php），一行一条</span>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">释放前</label>
                            <div class="col-lg-8">
                                <div class="fs-box">
                                    <div class="label label-default">
                                        <i class="fs-max fa fa-expand"></i>
                                        <i class="fs-min fa fa-compress hidden"></i>
                                    </div>
                                    <div id="prevRelease" class="form-control" style="height: 260px; width: 100%"></div>
                                    <span class="fa fa-info-circle mar-top-7"> 当前命令执行路径是项目当前的版本目录，同步完所有目标机器之后，更改版本软链之前触发任务。java可能要做一些暂停服务的操作，一行一条</span>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">释放后</label>
                            <div class="col-lg-8">
                                <div class="fs-box">
                                    <div class="label label-default">
                                        <i class="fs-max fa fa-expand"></i>
                                        <i class="fs-min fa fa-compress hidden"></i>
                                    </div>
                                    <div id="postRelease" class="form-control" style="height: 260px; width: 100%"></div>
                                    <span class="fa fa-info-circle mar-top-7"> 当前命令执行路径是项目的根目录，所有目标机器都部署完毕之后，做一些清理工作，如删除缓存、平滑重载/重启服务（nginx、php、task），一行一条</span>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>

        <div class="panel-footer">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-6">
                    <div class="col-sm-7 col-sm-offset-3">
                        <button class="btn btn-mint pull-right" type="submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}



{% block buttom_js %}
    {{ super() }}
    <!--bees-->
    <script src="{{ url_for('static', filename='js/bees.js') }}"></script>
    <!--Treeview-->
    <script src="{{ url_for('static', filename='plugins/bootstrap-treeview/js/bootstrap-treeview.min.js') }}"></script>
    <!--ace-->
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/ace.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/ext-language_tools.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/theme-tomorrow.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/mode-sh.js') }}"></script>

    <script type="text/javascript">

        function initEditor(ele) {
            ace.require("ace/ext/language_tools");
            var editor = ace.edit(ele);
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true //只能补全
            });
            editor.setTheme("ace/theme/tomorrow");//monokai模式是自动显示补全提示
            editor.getSession().setMode("ace/mode/sh");//语言
            editor.setShowPrintMargin(false);
            editor.setFontSize(14);
            return editor
        }

        $(function () {
            bees.initSelect2({
                ele: $('select[name="repo_mode"]')
            });

            bees.initSelect2({
                ele: $('select[name="repo_type"]')
            });

            bees.initServerSideSelect2(
                $('select[name="environment_id"]'),
                {url: '{{ url_for('codes.api-environment-list') }}'},
                {}
            );

            bees.initServerSideSelect2(
                $('select[name="label_id"]'),
                {url: '{{ url_for('codes.api-label-list') }}'},
                {}
            );

            bees.initServerSideSelect2(
                $('select[name="server_ids"]'),
                {url: '{{ url_for('assets.api-asset-list') }}'},
                {multiple:true}
            );

            // svn/git切换
            $('select[name="repo_type"]').on('change', function () {
                var repoType = $(this).find('option:selected').val();
                if(repoType == 'git'){
                    $('input[name="repo_password"]').closest('.col-lg-12').removeClass('show').addClass('hide');
                    $('input[name="repo_username"]').closest('.col-lg-12').removeClass('show').addClass('hide');
                }else {
                    $('input[name="repo_password"]').closest('.col-lg-12').removeClass('hide').addClass('show');
                    $('input[name="repo_username"]').closest('.col-lg-12').removeClass('hide').addClass('show');
                }
            });

            // 代码编辑器
            var postRelease = initEditor('postRelease');
            var prevRelease = initEditor('prevRelease');
            var postDeploy = initEditor('postDeploy');
            var prevDeploy = initEditor('prevDeploy');
            $(".fs-box > .label").on('click', function () {
                $(this).parent('.fs-box').toggleClass('fullscreen');
                if($(this).parent('.fs-box').hasClass('fullscreen')){
                    $('.fs-box .fs-max').addClass('hidden');
                    $('.fs-box .fs-min').removeClass('hidden');
                    $(this).parent('.fs-box').children('.ace_editor').css({'height':'100%'});
                    var action = $(this).parent('.fs-box').children('.ace_editor').attr('id');
                    switch (action) {
                        case 'postRelease':
                            postRelease.resize();
                            break;
                        case 'prevRelease':
                            prevRelease.resize();
                            break;
                        case 'postDeploy':
                            postDeploy.resize();
                            break;
                        case 'prevDeploy':
                            prevDeploy.resize();
                    }

                }else {
                    $('.fs-box .fs-min').addClass('hidden');
                    $('.fs-box .fs-max').removeClass('hidden');
                    $(this).parent('.fs-box').children('.ace_editor').css({'height':'260px'});

                    var action = $(this).parent('.fs-box').children('.ace_editor').attr('id');
                    switch (action) {
                        case 'postRelease':
                            postRelease.resize();
                            break;
                        case 'prevRelease':
                            prevRelease.resize();
                            break;
                        case 'postDeploy':
                            postDeploy.resize();
                            break;
                        case 'prevDeploy':
                            prevDeploy.resize();
                    }
                }
            });

            // 提交表单
            var $formEle = $('form[name="projectForm"]');
            bees.niceValidate($formEle);
            $formEle.on("valid.form", function () {
                setAjaxCSRFToken();

                var formData = bees.serializeToObject($formEle.serializeArray());
                formData['post_release'] = postRelease.getValue();
                formData['prev_release'] = prevRelease.getValue();
                formData['post_deploy'] = postDeploy.getValue();
                formData['prev_deploy'] = prevDeploy.getValue();
                $.ajax({
                    type: 'post',
                    url: '{{ url_for("codes.project-create") }}',
                    data : formData,
                    success: function (result) {
                        if (result.code != 200) {
                            $formEle.find('*[name='+ result.data.field +']').focus().addClass('has-error');
                            bees.tipError({
                                message: result.data.message
                            });
                        }else {
                            bees.tipInfo({
                                message: '新增成功'
                            });
                            window.location.href = '{{ url_for("codes.project-list") }}'
                        }
                    }
                });
            })
        })

    </script>

{% endblock %}
